<template>
    <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="结构">
            <el-col :span="10">
                <el-input v-model="form.name" :fetch-suggestions='querySearch'
          @select='handleSelect'></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="规格">
            <el-col :span="15">
              <el-input v-model="form.az" placeholder="请输入规格型号"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="厂家推荐">
            <el-select v-model="form.vender" placeholder="请选择厂家">
              <el-option label="厂家 A" value="厂家 A"></el-option>
              <el-option label="厂家 2" value="厂家 2"></el-option>
              <el-option label="厂家 3" value="厂家 3"></el-option>
            </el-select>
            <el-select v-model="form.vender" placeholder="请选择厂家">
              <el-option label="厂家 A" value="厂家 A"></el-option>
              <el-option label="厂家 2" value="厂家 2"></el-option>
              <el-option label="厂家 3" value="厂家 3"></el-option>
            </el-select>
            <el-select v-model="form.vender" placeholder="请选择厂家">
              <el-option label="厂家 A" value="厂家 A"></el-option>
              <el-option label="厂家 2" value="厂家 2"></el-option>
              <el-option label="厂家 3" value="厂家 3"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="推荐代理商">
            <el-select v-model="form.agent" placeholder="请选择推荐代理商">
              <el-option label="供应商 A" value="供应商 A"></el-option>
              <el-option label="供应商 2" value="供应商 2"></el-option>
              <el-option label="供应商 3" value="供应商 3"></el-option>
            </el-select>
            <el-select v-model="form.agent" placeholder="请选择推荐代理商">
              <el-option label="供应商 A" value="供应商 A"></el-option>
              <el-option label="供应商 2" value="供应商 2"></el-option>
              <el-option label="供应商 3" value="供应商 3"></el-option>
            </el-select>
            <el-select v-model="form.agent" placeholder="请选择推荐代理商">
              <el-option label="供应商 A" value="供应商 A"></el-option>
              <el-option label="供应商 2" value="供应商 2"></el-option>
              <el-option label="供应商 3" value="供应商 3"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="进口/国产">
            <el-select v-model="form.come" placeholder="请选择进口/国产">
              <el-option label="进口" value="进口"></el-option>
              <el-option label="国产" value="国产"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="单价" label-width="100px">
            <el-col :span="15">
                <el-input v-model="form.price" placeholder="请输入单价"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="金额" label-width="100px">
            <el-col :span="15">
                <el-input v-model="form.money" placeholder="请输入金额"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="申请理由">
            <el-input type="textarea" v-model="form.reson"></el-input>
        </el-form-item>
        <el-form-item label="申请人">
            <el-col :span="15">
              <el-input disabled v-model="form.applyName" value="虎卫具"></el-input>
            </el-col>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
  props: ['form'],
  data () {
    return {
      activeName: 'second',
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            },
            {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }]
        }
      ],
      selectedOptions: []
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      console.log(file.type)
      const isJPG = file.type === 'image/jpeg' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    handleSelect (item) {
      console.log(item)
    },
    handleChange (value) {
      console.log(value)
    }
  }
}
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 90px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar, .noImg {
    width: 90px;
    height: 120px;
    display: block;
    border: 1px solid #eee
  }
</style>
